<template>
    <el-row>
        <el-col :span="10">
            <el-card>
                <el-upload style="display: inline-block; margin-right: 10px; margin-bottom: 20px;"
                    action="http://localhost:8080/admin/dept/upload" :headers="headers" :show-file-list="false"
                    :on-success="successExcel">
                    <el-button type="success" plain>上传</el-button>
                </el-upload>
                <el-button type="primary" plain @click="addFormShow = true;">添加</el-button>
                <el-table :data="all" border style="width: 100%">
                    <el-table-column prop="did" label="ID" width="50px" />
                    <el-table-column prop="dname" label="部门名称" />
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button size="small" plain type="warning" @click="selectByDid(scope.row.did)">
                                修改
                            </el-button>
                            <el-popconfirm title="确定删除部门？" confirm-button-text="确认" cancel-button-text="取消"
                                @confirm="deleteByDid(scope.row.did)">
                                <template #reference>
                                    <el-button size="small" type="danger" plain>
                                        删除
                                    </el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-col>
    </el-row>
    <!-- 添加对话框开始 -->
    <el-dialog v-model="addFormShow" title="添加部门" width="500">
        <el-form>
            <el-form-item label="部门名称" label-width="20%">
                <el-input autocomplete="off" v-model="addForm.dname" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addFormShow = false">
                    取消
                </el-button>
                <el-button type="primary" @click="insert()">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 添加对话框结束 -->

    <!-- 修改对话框开始 -->
    <el-dialog v-model="updateFormShow" title="修改部门" width="500">
        <el-form>
            <el-form-item label="部门名称" label-width="20%">
                <el-input autocomplete="off" v-model="updateForm.dname" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="updateFormShow = false">
                    取消
                </el-button>
                <el-button type="primary" @click="update()">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 修改对话框结束 -->
</template>


<script setup>
import deptApi from '@/api/deptApi';
import { ref, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { ElLoading } from 'element-plus'
import { useTokenStore } from '@/stores/token';

const tokenStore = useTokenStore();
const all = ref([]);
const addFormShow = ref(false);
const addForm = ref({
    dname: '',
    dlocation: ''
});
const updateFormShow = ref(false);
const updateForm = ref({
    did: 0,
    dname: '',
    dlocation: ''
});
//计算属性
const headers = computed(() => {
    let token = tokenStore.tokenStr;
    return {
        token
    }
})

function successExcel() {
    ElMessage({
        message:'上传成功',
        type: 'success',
        duration: 1500
    });
    selectAll();
}

//修改
function update() {
    deptApi.update(updateForm.value)
        .then(resp => {
            if (resp.code == 10000) {
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                    duration: 1500
                })
                updateFormShow.value = false;
                selectAll();
            } else {
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                    duration: 1500
                });
            }
        })
}
//根据did查询
function selectByDid(did) {
    deptApi.selectByDid(did)
        .then(resp => {
            updateForm.value = resp.data;
            updateFormShow.value = true;
        })
}

//添加
function insert() {
    const loading = ElLoading.service({
        lock: true,
        text: '加载中',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    deptApi.insert(addForm.value)
        .then(resp => {
            loading.close();
            if (resp.code == 10000) {
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                    duration: 1500
                })
                addFormShow.value = false;
                addForm.value = {
                    dname: '',
                    dlocation: ''
                };
                selectAll();
            } else {
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                    duration: 1500
                });
                addForm.value = {
                    dname: '',
                    dlocation: ''
                };
            }
        });
}
//查询所有
function selectAll() {
    deptApi.selectAll() //发送axios请求到服务器
        .then(resp => {
            all.value = resp.data;
        });
}
//删除
function deleteByDid(did) {

    deptApi.delete(did)
        .then(resp => {
            if (resp.code == 10000) {
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                    duration: 1500
                })
                selectAll();
            } else {
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                    duration: 1500
                });
            }
        });

}
selectAll();
</script>
<style scoped></style>